<template>
    <div class="order">
      <div class="hasOrder" v-show="!!order_list.length">
        <div class="all_info sjj">
          <p class="yxd_title">{{ flag==1?'已下单的菜':'结账'}}</p>
          <div class="table_info">
            <span class="table_num fl">桌号 {{ data_info.table_id }}</span>
            <span class="users_num">人数 {{ data_info.users_num }}</span>
            <span class="ordedr_time fr">下单时间 {{ data_info.time}}</span>
          </div>
          <div class="qian">
            <div class="qian_up">
              <span class="fl">应付:￥{{ data_info.total }}</span>
              <span class="fr">已付:￥0.00</span>
            </div>
            <div class="qian_down">
              <span class="xzf red fl">还需支付￥{{ data_info.total }}</span>
              <span class="fr zf_btn">立即支付</span>
            </div>
          </div>
        </div>
        <div class="detail">
          <ul>
            <li class="content_list sjj" v-for="item in data_info.order_list">
              <div class="user_info_box">
                <div class="user_info fl">
                  <img :src="item.user_pic" alt="" class="icon_pic">
                  {{ item.user_name }}
                </div>
                <div class="cai_num">{{ item.list.length }}份</div>
                <div class="user_time fr">{{ item.time }}</div>
              </div>
              <template  v-for="cl in item.list">
                <div class="cai_list">
                  <div class="cai_list_name">{{ cl.name }}</div>
                  <div class="pricenum_box">
                <span class="cai_list_price red fl">
                  ￥{{ cl.price }}
                </span>
                    <span class="cai_list_num">
                  {{ cl.order_num }}份
                </span>
                  </div>
                  <i :class="'cai_list_icon i'+cl.status"></i>
                </div>
              </template>


            </li>

          </ul>
        </div>
        <div class="cai_all sjj">
          {{ data_info.description}}
        </div>
      </div>

      <div class="empty sjj" v-show="!order_list.length">
        <img src="../assets/hello.png" alt="">
        <div class="word">
          <p class="p1">您还没有下单</p>
          <p class="p2">
            请点击下方的“继续点菜”按钮开始点菜
          </p>
        </div>
      </div>


      <div class="bottom_btns">
        <div class="b_btn btn_nav" @click="showNav">
          <i></i>
          导航
        </div>
        <router-link :to="{path: '/dishesList'}" >
          <div class="b_btn btn_jxdc">
            <i></i>
            继续点菜
          </div>
        </router-link>
      </div>

      <div class="mask">
      </div>
      <div class="nav_detail">
        <ul>
          <li class="dpxx" @click="godpxx">
            <span>店铺信息</span>
          </li>
          <li class="cd" @click="gocd">
            <span>菜单</span>
          </li>
          <li class="gwc" @click="gogwc">
            <span>购物车</span>
          </li>
          <li class="ydgdc" @click="hideNav">
            <span>已下单的菜</span>
          </li>
          <li class="jz" @click="hideNav">
            <span>结账</span>
          </li>
          <li class="fh" @click="hideNav">
            <span>返回</span>
          </li>
        </ul>
      </div>
      <div class="bg"></div>
    </div>
</template>

<script>
    export default {
      data (){
        return{
          data_info:'',
          flag:'1',
          order_list:''
        }
      },
      created (){
        console.log(this.$router);
//        this.flag = this.$router.query.flag
        this.$http.get(this.kdUrl.url_host+'version=1&resource=order&method=check_order&token=' + localStorage.getItem("kd_token")).then((res) => {
          console.log('查看下单列表')
          console.log(res)
          /*测试*/
//          res.body.data.order_list = res.body.data.order_list.concat(res.body.data.order_list)
          this.data_info = res.body.data
          this.order_list = res.body.data.order_list


        },(err) => {

        })
      },
      methods:{
        showNav (){
          $('.mask').fadeIn()
          $('.nav_detail').fadeIn()
        },
        hideNav (){
          $('.mask').fadeOut()
          $('.nav_detail').fadeOut()
        },
        godpxx (){
          this.$router.push('/restaurantInfo')
        },
        gocd (){
          this.$router.push('/dishesList')
        },
        gogwc (){
          this.$router.push('/shoppingCart')
        },
        goydgdc (){
          this.$router.push({path:'/order',query:{flag:1}})
        },
        gojz (){
          this.$router.push({path:'/settleAccounts',query:{flag:2}})
        },
      }
    }
</script>

<style scoped>
  .empty{
    margin-top: 20px;
    height: 130px;
    padding: 15px 2% 10px 10%;
    background: #fff;
  }
  .empty img{

    width: 25%;
    vertical-align: middle;
  }
  .word{
    display: inline-block;
    vertical-align: middle;
    padding-left: 10%;
    width: 73%;
  }
  .word .p1{
    font-size: 18px;
    margin-bottom: 10px;
    width: 100%;
  }
  .word .p2{
    width: 100%;
    font-size: 14px;
    color: #999;
  }


  .order{
    padding: 0 2.5% 100px;
  }
  .all_info,.content_list,.cai_all{
    background: #fff;
    margin-top: 15px;
  }
  .yxd_title{
    font-size: 17px;
    padding: 8px 0;
    text-align: center;
  }
  .table_info{
    padding: 5px 10px 8px;
    border-bottom: 1px solid #dddddd;
    position: relative;
    overflow: hidden;
    color: #666;
  }
  .users_num{
    position: absolute;
    top: 5px;;
    left: 50%;
    transform: translateX(-50%);
  }
  .qian{
    padding: 15px 10px;
    font-size: 15px;
  }
  .qian_up,.qian_down{
    overflow: hidden;
  }
  .qian_up{
    margin-bottom: 20px;
  }
  .zf_btn{
    width: 130px;
    height: 30px;
    border-radius: 5px;
    background: #D0021B;
    line-height: 30px;
    text-align: center;
    color: #fff;
    font-size: 14px;
  }
  .content_list{
    margin-bottom: 10px;
  }
  .user_info_box{
    padding: 10px 10px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
  }
  .user_info{
    padding-left: 36px;
    position: relative;
  }
  .user_info .icon_pic{
    position: absolute;
    width: 30px;
    height: 30px;
    top: -4px;
    left: 0;
    border-radius: 50%;
  }
  .cai_num{
    position: absolute;
    top: 8px;;
    left: 50%;
    transform: translateX(-50%);
  }
  .cai_list{
    padding: 0 10px;
    position: relative;
  }
  .cai_list_name{
    font-size: 17px;
    padding: 10px 0;
  }
  .pricenum_box{
    padding: 5px 0;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
  }
  .cai_list_num{
    position: absolute;
    top: 5px;;
    left: 50%;
    transform: translateX(-50%);
  }
  .cai_list_icon{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 58px;
    height: 40px;
    background-image: url('../assets/orderStates.png');
    background-repeat: no-repeat;
    background-size: 189px 180px;

  }
  .i0{
    background-position: -63px 0;
  }
  .i1{
    background-position: -63px -45px;
  }
  .i2{
    background-position: -63px -135px;
  }
  .cai_all{
    line-height: 20px;
    font-size: 13px;
    padding: 8px 10px;
    color: #307ad4;
  }

  /*底部按钮*/
  .bottom_btns{
    height: 60px;
    width: 100%;
    position: fixed;
    bottom: 20px;
    left: 0;
  }
  .b_btn{
    position: absolute;
    top:0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border:2px solid #fff;
    text-align: center;
    padding-top: 28px;
    background: #313131;
    color: #fff;
    font-size: 12px;
  }

  .btn_jxdc{
    background: #ce2101;
    right: 2.5%;

  }
  .btn_nav{
    left: 2.5%;
  }
  .btn_jxdc i,.btn_order i,.btn_nav i{
    position: absolute;
    width: 30px;
    height: 25px;
    background-image: url('../assets/theme_dark.png');
    background-repeat: no-repeat;
    background-size: 600px 720px;
  }
  .btn_jxdc i{
    top: 6px;
    left: 13px;
    background-position: -416px -372px;
  }
  .btn_order i{
    top: 7px;
    left: 15px;
    background-position: -227px -374px;
  }
  .btn_nav i{
    top: 5px;
    left: 15px;
    background-position: -129px -276px;
  }






</style>
